<script setup lang="ts">
import { ref } from 'vue'

const money = ref(100)
const subMoney = (num: number) => {
  // ref别漏了.value哦
  money.value -= num
}
</script>

<template>
  <div id="app">
    <div class="box">
      <h3>黑马自动售货机</h3>
      <button @click="subMoney(5)">可乐5元</button>
      <button v-on:click="subMoney(10)">咖啡10元</button>
      <!-- mouseenter移入 -->
      <button @mouseenter="subMoney(8)">牛奶8元</button>
      <!-- 双击 dblclick -->
      <button @dblclick="subMoney(20)">猪脚饭20元</button>
      <button>麻辣香锅30元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>
</template>

<style>
.box {
  border: 3px solid #000000;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  width: 200px;
}

h3 {
  margin: 10px 0 20px 0;
}

p {
  margin: 20px;
}
</style>
